Flutter allows developers to build applications for mobile, tablet, desktop, and web from a shared codebase. However, creating a good multi-device application does not mean simply stretching the same mobile interface onto a larger screen. The UI should respond to the available space and, when necessary, change its structure, navigation, content density, and interaction patterns.
Flutter's adaptive and responsive design guidance recommends making layout decisions based on the space available to the application rather than assuming that a particular physical device type always has a particular screen size. This is especially important for tablets, foldables, split-screen windows, desktop applications, and resizable web browsers.
Mobile, tablet, and desktop UI refers to designing a Flutter application so that its interface remains usable and visually appropriate across different screen sizes and input environments.
A Flutter application can use the same underlying data and business logic while presenting different UI structures for different available window sizes.
A Flutter application may run on many different screen sizes. A mobile layout that works well on a phone can look excessively stretched on a desktop monitor.
Multi-device UI design helps you:
| Responsive UI | Adaptive UI |
|---|---|
| Adjusts the placement and sizing of UI elements. | Selects an appropriate UI structure for the available space. |
| Example: cards resize according to available width. | Example: bottom navigation changes to side navigation. |
| Focuses on fitting the UI into available space. | Focuses on keeping the UI usable in that space. |
| Often uses flexible widgets. | Often uses layout branching and alternative widgets. |
In real Flutter applications, responsive and adaptive techniques are commonly used together.
Do not assume that a physical device category always determines the amount of space available to your application.
For example, a tablet can run an application in split-screen mode, giving the application a much narrower window than the full tablet display. Similarly, a desktop application can be resized to a small window.
Therefore, instead of writing:
if (isTablet) {
return TabletUI();
}prefer a layout decision based on available width:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 600) {
return const LargeLayout();
}
return const CompactLayout();
},
)A common application strategy can be:
| Available Width | Possible Layout |
|---|---|
| Small | Single-column mobile layout. |
| Medium | Two-column or tablet layout. |
| Large | Sidebar + content layout. |
| Extra Large | Sidebar + constrained content + additional panels. |
The exact breakpoints should be selected based on the application's design requirements. They should not be treated as universal device classifications.
Mobile devices generally provide limited horizontal space. A mobile interface often benefits from a simple hierarchy, vertical scrolling, compact navigation, and touch-friendly controls.
class MobileHome extends StatelessWidget {
const MobileHome({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Mobile Home'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: const [
Card(
child: ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.person),
title: Text('Profile'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
),
],
),
bottomNavigationBar: NavigationBar(
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}Tablets provide more horizontal space than typical mobile screens. Instead of simply enlarging mobile widgets, use the additional space to display more information at the same time.
class TabletHome extends StatelessWidget {
const TabletHome({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
NavigationRail(
selectedIndex: 0,
onDestinationSelected: (index) {},
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
),
const Expanded(
child: Center(
child: Text('Tablet Content'),
),
),
],
);
}
}Desktop screens provide significantly more space and generally support mouse, keyboard, trackpad, hover, right-click, scrolling and keyboard shortcuts.
class DesktopHome extends StatelessWidget {
const DesktopHome({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
SizedBox(
width: 260,
child: Container(
color: Colors.black12,
child: const Center(
child: Text('Sidebar'),
),
),
),
const VerticalDivider(width: 1),
const Expanded(
child: Center(
child: Text('Desktop Content'),
),
),
],
);
}
}LayoutBuilder is one of the most useful widgets for creating mobile, tablet, and desktop layouts because it provides the constraints available from the parent widget.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileHome();
}
if (constraints.maxWidth < 1000) {
return const TabletHome();
}
return const DesktopHome();
},
)The constraints.maxWidth value allows the application to choose an appropriate layout according to the available width.
MediaQuery.sizeOf(context) provides the current size of the application's window/view in logical pixels.
final size = MediaQuery.sizeOf(context);
final width = size.width;
final height = size.height;Example:
Widget build(BuildContext context) {
final width = MediaQuery.sizeOf(context).width;
if (width < 600) {
return const MobileHome();
}
return const DesktopHome();
}Use MediaQuery when the overall application window size matters. Use LayoutBuilder when the local constraints available to a specific widget matter.
class AdaptiveHome extends StatelessWidget {
const AdaptiveHome({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileHome();
} else if (constraints.maxWidth < 1000) {
return const TabletHome();
} else {
return const DesktopHome();
}
},
);
}
}This pattern keeps the layout decision in one location and allows each layout to be developed separately.
| Platform / Size | Possible Navigation |
|---|---|
| Mobile | NavigationBar, Drawer or compact navigation. |
| Tablet | NavigationRail or navigation with more visible destinations. |
| Desktop | Sidebar, NavigationRail, menus and multi-panel navigation. |
For example:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileNavigation();
}
return const LargeScreenNavigation();
},
)NavigationBar(
selectedIndex: 0,
onDestinationSelected: (index) {},
destinations: const [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.search),
label: 'Search',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
)This type of navigation is useful when horizontal space is limited.
NavigationRail(
selectedIndex: 0,
onDestinationSelected: (index) {},
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.search),
label: Text('Search'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
)A rail can make better use of horizontal space when the window is wide enough.
A mobile application may use a single vertical list:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item ${index + 1}'),
);
},
)On a larger screen, the same data can be displayed in a grid:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: 20,
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text('Item ${index + 1}'),
),
);
},
)This allows content to use large screens without making each item unnecessarily wide.
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 280,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.8,
),
itemCount: 30,
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
const Expanded(
child: Icon(
Icons.shopping_bag,
size: 60,
),
),
Text('Product ${index + 1}'),
const SizedBox(height: 10),
],
),
);
},
);
},
)Using a maximum item extent allows the grid to adapt naturally as the window becomes wider.
A dashboard can display different structures depending on available space.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
DashboardCard(title: 'Users'),
DashboardCard(title: 'Orders'),
DashboardCard(title: 'Revenue'),
DashboardCard(title: 'Pending'),
],
);
}
if (constraints.maxWidth < 1000) {
return GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
DashboardCard(title: 'Users'),
DashboardCard(title: 'Orders'),
DashboardCard(title: 'Revenue'),
DashboardCard(title: 'Pending'),
],
);
}
return GridView.count(
padding: const EdgeInsets.all(24),
crossAxisCount: 4,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
children: const [
DashboardCard(title: 'Users'),
DashboardCard(title: 'Orders'),
DashboardCard(title: 'Revenue'),
DashboardCard(title: 'Pending'),
],
);
},
)
class DashboardCard extends StatelessWidget {
final String title;
const DashboardCard({
super.key,
required this.title,
});
@override
Widget build(BuildContext context) {
return Card(
child: Center(
child: Text(
title,
style: const TextStyle(fontSize: 20),
),
),
);
}
}Forms should remain readable on both small and large screens. A desktop form should generally have a maximum width instead of expanding across the entire monitor.
LayoutBuilder(
builder: (context, constraints) {
final formWidth = constraints.maxWidth > 500
? 450.0
: constraints.maxWidth * 0.9;
return Center(
child: SizedBox(
width: formWidth,
child: Column(
children: [
const TextField(
decoration: InputDecoration(
labelText: 'Name',
),
),
const SizedBox(height: 16),
const TextField(
decoration: InputDecoration(
labelText: 'Email',
),
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Submit'),
),
),
],
),
),
);
},
)class LoginPage extends StatelessWidget {
const LoginPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 700) {
return _mobileLogin();
}
return _largeLogin();
},
),
),
);
}
Widget _mobileLogin() {
return Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: _loginForm(),
),
);
}
Widget _largeLogin() {
return Row(
children: [
const Expanded(
child: ColoredBox(
color: Colors.black12,
child: Center(
child: Text('Welcome'),
),
),
),
Expanded(
child: Center(
child: SizedBox(
width: 420,
child: _loginForm(),
),
),
),
],
);
}
Widget _loginForm() {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
const TextField(
decoration: InputDecoration(
labelText: 'Email',
),
),
const SizedBox(height: 16),
const TextField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Login'),
),
),
],
);
}
}List-detail interfaces are particularly useful on tablets and desktops.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 700) {
return Row(
children: [
SizedBox(
width: 300,
child: ContactList(),
),
const VerticalDivider(width: 1),
const Expanded(
child: ContactDetails(),
),
],
);
}
return const ContactList();
},
)On mobile, the application can navigate from the contact list to a separate details page. On larger screens, both areas can be displayed simultaneously.
LayoutBuilder(
builder: (context, constraints) {
final isLarge = constraints.maxWidth >= 900;
if (!isLarge) {
return const MobileContent();
}
return Row(
children: [
const SizedBox(
width: 260,
child: Sidebar(),
),
const VerticalDivider(width: 1),
const Expanded(
child: MainContent(),
),
],
);
},
)This approach allows the application to expose more navigation options when sufficient space exists.
A common adaptive pattern is to use a Column for compact layouts and a Row for wider layouts.
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth >= 700;
if (isWide) {
return const Row(
children: [
Expanded(child: Text('Section 1')),
Expanded(child: Text('Section 2')),
],
);
}
return const Column(
children: [
Text('Section 1'),
Text('Section 2'),
],
);
},
)Do not depend on fixed widths for every widget. Expanded and Flexible help distribute available space.
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 150,
child: const Center(
child: Text('Left'),
),
),
),
Expanded(
flex: 2,
child: Container(
height: 150,
child: const Center(
child: Text('Right'),
),
),
),
],
)The second widget receives twice the flex space of the first widget.
Large screens can tempt developers to stretch content across the entire width. However, very wide text fields, paragraphs and cards can reduce readability.
Use ConstrainedBox when appropriate:
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 900,
),
child: const Padding(
padding: EdgeInsets.all(24),
child: Text(
'This content has a maximum readable width.',
),
),
),
)Some mobile and tablet devices contain display cutouts, status bars, rounded corners, or other system UI areas. SafeArea helps keep content away from these intrusions.
Scaffold(
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(16),
children: const [
Text('Safe Content'),
],
),
),
)SafeArea is especially useful for edge-to-edge mobile layouts.
Mobile devices can change between portrait and landscape. An adaptive UI should be able to handle both orientations when appropriate.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > constraints.maxHeight) {
return const WideLayout();
}
return const CompactLayout();
},
)However, orientation alone should not be the main basis for layout decisions. Available width and height are more useful because a desktop or tablet window can be resized independently of physical orientation.
Desktop applications are not only larger versions of mobile applications. They can also provide additional input methods.
Desktop users commonly expect:
Flutter's Material widgets provide many standard interactions automatically, while custom widgets may need additional handling.
class HoverCard extends StatefulWidget {
const HoverCard({super.key});
@override
State createState() => _HoverCardState();
}
class _HoverCardState extends State {
bool isHovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) {
setState(() {
isHovered = true;
});
},
onExit: (_) {
setState(() {
isHovered = false;
});
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
),
child: Text(
isHovered ? 'Hovered' : 'Move Mouse Here',
),
),
);
}
}Tables can work well on desktop screens but may be difficult to use on narrow mobile screens.
On mobile, consider:
On desktop, more columns can be visible at once.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 700) {
return const MobileDataCards();
}
return const DesktopDataTable();
},
)A dialog that works well on a phone may become unnecessarily narrow or wide on a desktop.
LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth > 600
? 500.0
: constraints.maxWidth * 0.9;
return Center(
child: SizedBox(
width: width,
child: const Card(
child: Padding(
padding: EdgeInsets.all(24),
child: Text('Adaptive Dialog Content'),
),
),
),
);
},
)Images should scale without breaking their aspect ratio.
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
),
)For responsive image layouts, avoid unnecessarily fixed image dimensions. Let the parent determine the available size where appropriate.
Text should remain readable across screen sizes and accessibility settings.
Text(
'Responsive Flutter UI',
style: Theme.of(context).textTheme.headlineMedium,
)Prefer Flutter's text styles and flexible layouts instead of forcing large amounts of text into fixed-height containers.
Always test interfaces with larger text settings because accessibility text scaling can affect layout.
Large screens can expose additional actions while compact screens may need fewer visible actions.
LayoutBuilder(
builder: (context, constraints) {
return AppBar(
title: const Text('Dashboard'),
actions: constraints.maxWidth > 700
? [
TextButton(
onPressed: () {},
child: const Text('Reports'),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.settings),
),
]
: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.more_vert),
),
],
);
},
)import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const AdaptiveHomePage(),
);
}
}
class AdaptiveHomePage extends StatelessWidget {
const AdaptiveHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Multi-Device Flutter UI'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
}
if (constraints.maxWidth < 1000) {
return const TabletLayout();
}
return const DesktopLayout();
},
),
);
}
}
class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Text('Mobile Dashboard'),
),
),
Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Text('Users'),
),
),
Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Text('Orders'),
),
),
],
);
}
}
class TabletLayout extends StatelessWidget {
const TabletLayout({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
NavigationRail(
selectedIndex: 0,
onDestinationSelected: (index) {},
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Users'),
),
],
),
const Expanded(
child: Padding(
padding: EdgeInsets.all(20),
child: Text('Tablet Dashboard'),
),
),
],
);
}
}
class DesktopLayout extends StatelessWidget {
const DesktopLayout({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(
width: 260,
child: ColoredBox(
color: Colors.black12,
child: Center(
child: Text('Desktop Sidebar'),
),
),
),
const VerticalDivider(width: 1),
Expanded(
child: GridView.count(
padding: const EdgeInsets.all(24),
crossAxisCount: 4,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
children: const [
Card(child: Center(child: Text('Users'))),
Card(child: Center(child: Text('Orders'))),
Card(child: Center(child: Text('Revenue'))),
Card(child: Center(child: Text('Pending'))),
],
),
),
],
);
}
}For a larger multi-device Flutter application, separate shared components from layout-specific screens.
lib/
├── main.dart
├── models/
│ └── product.dart
├── data/
│ └── product_data.dart
├── widgets/
│ ├── adaptive_layout.dart
│ ├── dashboard_card.dart
│ └── product_card.dart
├── layouts/
│ ├── mobile_layout.dart
│ ├── tablet_layout.dart
│ └── desktop_layout.dart
└── screens/
├── home_screen.dart
├── profile_screen.dart
└── settings_screen.dartThis structure can make adaptive applications easier to maintain.
Different layouts should not duplicate application logic unnecessarily.
For example, the same product model can be used by mobile, tablet and desktop interfaces.
class Product {
final String name;
final double price;
const Product({
required this.name,
required this.price,
});
}Only the presentation structure changes:
if (isMobile) {
return ProductList(products: products);
}
return ProductGrid(products: products);This separation keeps the application easier to test and maintain.
When the window size or orientation changes, an adaptive application should preserve important state whenever possible.
Examples of state that may need to be preserved:
For scrollable widgets, PageStorageKey can help preserve scroll state in appropriate situations.
ListView(
key: const PageStorageKey('products'),
children: const [
Text('Product 1'),
Text('Product 2'),
Text('Product 3'),
],
)An adaptive application should ideally handle different window sizes and orientations instead of assuming that the application will always be portrait.
Modern environments can include:
A mobile UI may look stretched or empty on desktop.
if (isTablet) {
// Tablet layout
}Prefer available window or local layout constraints.
Container(
width: 700,
)This can cause overflow on smaller windows.
Text fields and paragraphs can become excessively wide. Use maximum content widths where appropriate.
Landscape does not automatically mean tablet or desktop.
Desktop users commonly expect keyboard, mouse, hover and scrolling interactions.
Keep data and business logic shared whenever possible and change only the UI structure.
LayoutBuilder for local constraints.MediaQuery.sizeOf for whole-window measurements.Expanded and Flexible.ConstrainedBox or maximum widths on large screens.SafeArea when appropriate.Test mobile layouts using:
Check for:
Test tablets in:
Check whether the additional horizontal space is actually being used effectively.
Test desktop applications with:
Also test resizing the application continuously to identify layout problems.
Answer: Adaptive UI is a design approach where the application changes its layout or interaction pattern to remain usable in different available spaces and environments.
Answer: Mobile UI generally prioritizes compact layouts and touch interaction, while desktop UI can use larger layouts, sidebars, multiple panels, mouse interaction, hover states and keyboard shortcuts.
Answer: LayoutBuilder is commonly used because it provides the constraints available from its parent.
Answer: It returns the current size of the application's window/view in logical pixels.
Answer: A device's physical screen size does not necessarily equal the space currently available to the application because of split-screen, resizable windows, desktop applications and web browsers.
Answer: The application can use a NavigationBar on compact layouts and a NavigationRail or sidebar on wider layouts.
Answer: GridView can distribute content across multiple columns and prevent individual items from becoming unnecessarily wide.
Answer: It can limit maximum content width so that text, forms and other content remain readable on large screens.
Answer: Mouse, trackpad, keyboard, scrolling, hover and keyboard navigation should be considered where appropriate.
Answer: No. Flutter allows you to share data, business logic and reusable components while changing the presentation structure according to available space.
| Topic | Key Point |
|---|---|
| Mobile UI | Compact, touch-friendly and generally single-column. |
| Tablet UI | Uses additional space for grids and side-by-side content. |
| Desktop UI | Supports large layouts, sidebars and multiple panels. |
| LayoutBuilder | Provides local parent constraints. |
| MediaQuery.sizeOf | Provides application window/view size. |
| NavigationBar | Useful for compact navigation. |
| NavigationRail | Useful for wider layouts. |
| GridView | Useful for multi-column content. |
| Expanded | Uses available Flex space. |
| Flexible | Allows flexible sizing within Flex layouts. |
| ConstrainedBox | Controls maximum or minimum dimensions. |
| SafeArea | Protects content from system UI and display cutouts. |
For structured Flutter training and practical learning resources, visit:
JustAcademy Flutter Training Course
To register for a Flutter course demo:
Register for Flutter Course Demo
Building Mobile, Tablet and Desktop UI in Flutter requires more than resizing widgets. A good multi-device application considers the available space, navigation requirements, content density, input methods, accessibility, and the strengths of each form factor.
Use LayoutBuilder when a component needs to respond to its local constraints and MediaQuery.sizeOf when the overall application window size matters. Combine these tools with Row, Column, Expanded, Flexible, GridView, NavigationBar, NavigationRail, ConstrainedBox and SafeArea to create layouts that remain useful across mobile, tablet, desktop and web environments.
The most important principle is: design for the space your application actually receives, not merely for the physical device category.
